<template>
    <div id="logoser">
        <div class="logo">
            <img src="/img/logo_03.gif">
        </div>
        <div id="ser">
            <div class="ser">
                <select v-model="sercon" class="sercon">
                    <option value ="treasure">宝贝</option>
                    <option value ="tianmao">天猫</option>
                    <option value="store">店铺</option>
                </select>
            </div>
            <div class="ser">
                <input type="text" v-model="search" placeholder="请输入搜索信息" class="sertext">
            </div>
            <div class="ser">
                <button class="serbtn">搜索</button>
            </div>
            <div style="clear:both;"></div>
        </div>
        
    </div>
</template>

<script>
export default {
    data(){
        return {
            search:"",
            sercon:"treasure"
        }
    },
    watch:{
        sercon(){
            console.log(this.sercon);
        }
    }
}
</script>

<style scoped>
    div,select,input{
        margin: 0;
        padding: 0;
    }
    #logoser{
        height: 60px;
        width: 70%;
        min-width: 800px;
        background: #c2c4d3;
    }
    .logo{
        float: left;
        margin-left: 30px;
    } 
    .logo>img{
        width: 115px;
        height: 60px;
    }
    #ser{
        float: left;
        text-align: center;
        margin-top: 15px;
        margin-left: 233px;
        outline: none;
    }
    .sertext{
        width: 300px;
        height: 30px;
        font-size: 12px;
        border: none;
        outline: none;
    }
    .sercon{
        width: 50px;
        height: 30px;
        font-size: 12px;
        margin-top: 1px;
        border: none;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
        outline: none;
    }
    .ser{
        float: left;
    }
    .ser>button{
        outline: none;
    }
    .ser:first-child{
        margin-top: -1px;
    }
    .serbtn{
        width: 50px;
        height: 30px;
        border: none;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
    }
    .serbtn:hover{
        cursor: pointer;
    }
</style>